import React from 'react'
import { Drawer, List, Avatar, Divider, Col, Row, Icon, Pagination } from 'antd'
import styles from './index.css'
import {connect} from 'dva'

const pStyle = {
    fontSize: 16,
    color: 'rgba(0,0,0,0.85)',
    lineHeight: '24px',
    display: 'block',
    marginBottom: 16,
};

const DescriptionItem = ({ title, content }) => (
    <div
        style={{
            fontSize: 14,
            lineHeight: '22px',
            marginBottom: 7,
            color: 'rgba(0,0,0,0.65)',
        }}
    >
        <p
            style={{
                marginRight: 8,
                display: 'inline-block',
                color: 'rgba(0,0,0,0.85)',
            }}
        >
            {title}:
    </p>
        {content}
    </div>
);

class UserNotice extends React.Component {
    state = { visible: false };
    //点击查看详情
    showDrawer = (id) => {
        this.setState({
            visible: true,
        });
        this.props.dispatch({
            type:'noticeManage/findNoticeDetail',
            payload:id
        })
    };
    //点击遮罩层关闭
    onClose = () => {
        this.setState({
            visible: false,
        });
    };
    //点击选择页码
    onChange =(page,pageSize)=>{
        this.props.dispatch({
            type: 'noticeManage/queryPage',
            payload: {
                size: 10,
                start: page
            }
        })
    }
    render() {
        const { noticeList, allCount,dataList} = this.props.noticeManage;
        return (
            <div className={styles.content}>
                <Row>
                    <Col span={15} className={styles.col}>
                        <span className={styles.icon}>公告通知<Icon type="notification" theme="outlined" /></span>
                    </Col>
                </Row>
                <Row>
                    <List
                        dataSource={noticeList}
                        bordered
                        renderItem={item => (
                            <List.Item key={item.id} actions={[<a onClick={() => { this.showDrawer(item.rowguid)}}>点击查看详情</a>]}>
                                <List.Item.Meta
                                    avatar={
                                        <Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
                                    }
                                    title={<a>{item.republicName}</a>}
                                    description={item.udate}
                                />
                            </List.Item>
                        )}
                    />
                    <Drawer
                        width={640}
                        placement="right"
                        closable={false}
                        onClose={this.onClose}
                        visible={this.state.visible}
                    >
                        <p style={{ ...pStyle, marginBottom: 24 }}>标题：{dataList ? dataList.republicName : ''}</p>
                        <Row>
                            <Col span={12}>
                                <DescriptionItem title="发布时间" content={dataList ? dataList.udate : ''} />
                            </Col>
                            <Col span={12}>
                                <DescriptionItem title="浏览数" content={dataList ? dataList.readNum : ''} />
                            </Col>
                        </Row>
                        <Row className={styles.read}>{dataList ? dataList.republicContent : ''}</Row>
                    </Drawer>
                </Row>
                <Row className={styles.page}>
                    <Col span={22}>
                        <Pagination
                            className={styles.name}
                            defaultCurrent={1}
                            total={allCount}
                            showTotal={() => `共有${allCount}条数据`}
                            onChange={this.onChange}
                        />
                    </Col>
                    <Col span={2}></Col>
                    
                </Row>
                <Row className={styles.notice}></Row>
            </div>
        )
    }
}
export default connect(({ noticeManage }) => ({ noticeManage}))(UserNotice)